<script setup lang="ts">
import { reactive } from 'vue';

// 网站设置相关状态
const siteSettings = reactive({
    theme: 'dark',
    notification: true,
    editor: 'monaco',
    font: 'monaco'
})
import { useLocalStorage } from '@/utils/useLocalStorage'
import { message } from 'ant-design-vue';

const editorTheme = useLocalStorage('editor_theme', 'vs-dark')
const saveSettings = () => {
    // 这里可以添加保存设置到后端的逻辑
    message.success('设置保存成功')
}

</script>
<template>
    <a-card title="网站设置" bordered>
        <a-form :model="siteSettings" :label-col="{ span: 2 }">
            <a-form-item label="主题">
                <a-radio-group v-model:value="siteSettings.theme">
                    <a-radio value="dark">黑暗模式</a-radio>
                    <a-radio value="light">明亮模式</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="通知">
                <a-switch v-model:checked="siteSettings.notification" />
            </a-form-item>
            <a-form-item label="编辑器">
                <a-radio-group v-model:value="siteSettings.editor">
                    <a-radio value="ace">Ace</a-radio>
                    <a-radio value="monaco">Monaco</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="编辑器字体">
                <a-radio-group v-model:value="siteSettings.font">
                    <a-radio value="monaco">monaco</a-radio>
                    <a-radio value="console">console</a-radio>
                    <a-radio value="cascadia">cascadia</a-radio>
                    <a-radio value="courier">courier</a-radio>
                    <a-radio value="fira">fira</a-radio>
                    <a-radio value="Menlo">Menlo</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="编辑器主题">
                <a-radio-group v-model:value="editorTheme">
                    <a-radio value="vs-dark">dark</a-radio>
                    <a-radio value="vs-light">light</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" @click="saveSettings">保存设置</a-button>
            </a-form-item>
        </a-form>
    </a-card>
</template>